<template>
  <el-dialog
    :title="title"
    width="90%"
    :visible.sync="showModal"
    @close="closeDialog">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="auto">
      <el-row
        :gutter="20"
        style="flex-wrap: wrap"
        type="flex">
        <el-col :span="8">
          <el-form-item
            label="归档标记"
            prop="archiveFlag">
            <template v-if="pageType=='view'">
              {{ form.archiveFlag ? '是' : '否' }}
            </template>
            <el-select
              v-else
              v-model.trim="form.archiveFlag"
              style="width:100%"
              placeholder="请选择">
              <el-option
                v-for="item in flags"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item

            label="国别"
            prop="countryNameAbbr">
            <template v-if="pageType=='view'">
              {{ form.countryNameAbbr }}
            </template>
            <el-input
              v-else
              v-model.trim="form.countryNameAbbr"
              maxlength="3" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="中文简称"
            prop="chineseUsnmAbbr">
            <template v-if="pageType=='view'">
              {{ form.chineseUsnmAbbr }}
            </template>
            <el-input
              v-else
              v-model.trim="form.chineseUsnmAbbr"
              maxlength="22" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="中文全称"
            prop="chineseUserName">
            <template v-if="pageType=='view'">
              {{ form.chineseUserName }}
            </template>
            <el-input
              v-else
              v-model.trim="form.chineseUserName"
              maxlength="60" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="英文简称"
            prop="englishUsnmAbbr">
            <template v-if="pageType=='view'">
              {{ form.englishUsnmAbbr }}
            </template>
            <el-input
              v-else
              v-model.trim="form.englishUsnmAbbr"
              maxlength="20" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="英文全称"
            prop="englishUserName">
            <template v-if="pageType=='view'">
              {{ form.englishUserName }}
            </template>
            <el-input
              v-else
              v-model.trim="form.englishUserName"
              maxlength="40" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="类型"
            prop="userType">
            <template v-if="pageType=='view'">
              {{ renderText(difficultylevelOptions,form.userType) }}
            </template>
            <el-select
              v-else
              v-model.trim="form.userType"
              style="width:100%"
              placeholder="请选择">
              <el-option
                v-for="item in difficultylevelOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="类别"
            prop="userCategory">
            <template v-if="pageType=='view'">
              {{ renderText(difficultylevelOptions,form.userCategory) }}
            </template>
            <el-select
              v-else
              v-model.trim="form.userCategory"
              style="width:100%"
              placeholder="请选择">
              <el-option
                v-for="item in difficultylevelOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="税号"
            prop="taxNum">
            <template v-if="pageType=='view'">
              {{ form.taxNum }}
            </template>
            <el-input
              v-else
              v-model.trim="form.taxNum"
              maxlength="30"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="税号附加码"
            prop="taxNumAdd">
            <template v-if="pageType=='view'">
              {{ form.taxNumAdd }}
            </template>
            <el-input
              v-else
              v-model.trim="form.taxNumAdd"
              maxlength="2" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="地区公司/剪切中心标志"
            prop="companyFlag">
            <template v-if="pageType=='view'">
              {{ form.companyFlag }}
            </template>
            <el-input
              v-else
              v-model.trim="form.companyFlag"
              maxlength="2"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="行业"
            prop="trade">
            <template v-if="pageType=='view'">
              {{ form.trade }}
            </template>
            <el-input
              v-else
              v-model.trim="form.trade"
              maxlength="2"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item
            label="战略用户标志"
            prop="stratagemMark">
            <template v-if="pageType=='view'">
              {{ form.stratagemMark? '是' : '否' }}
            </template>
            <el-select
              v-else
              v-model.trim="form.stratagemMark"
              style="width:100%"
              placeholder="请选择">
              <el-option
                v-for="item in flags"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="注销标志"
            prop="cancelMark">
            <template v-if="pageType=='view'">
              {{ form.cancelMark? '是' : '否' }}
            </template>
            <el-select
              v-else
              v-model.trim="form.cancelMark"
              style="width:100%"
              placeholder="请选择">
              <el-option
                v-for="item in flags"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="关联客户标志"
            prop="relationMark">
            <template v-if="pageType=='view'">
              {{ form.relationMark? '是' : '否' }}
            </template>
            <el-select
              v-else
              v-model.trim="form.relationMark"
              style="width:100%"
              placeholder="请选择">
              <el-option
                v-for="item in flags"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="法人代码"
            prop="corpCode">
            <template v-if="pageType=='view'">
              {{ form.corpCode }}
            </template>
            <el-input
              v-else
              v-model.trim="form.corpCode"
              maxlength="6" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="组织机构码"
            prop="orgCode">
            <template v-if="pageType=='view'">
              {{ form.orgCode }}
            </template>
            <el-input
              v-else
              v-model.trim="form.orgCode"
              maxlength="12" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="办公所在地省份"
            prop="officeAddr">
            <template v-if="pageType=='view'">
              {{ form.officeAddr }}
            </template>
            <el-input
              v-else
              v-model.trim="form.officeAddr"
              maxlength="6" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="注册所在地省份"
            prop="addrRegst">
            <template v-if="pageType=='view'">
              {{ form.addrRegst }}
            </template>
            <el-input
              v-else
              v-model.trim="form.addrRegst"
              maxlength="6" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="邓百氏代码"
            prop="dunBrand">
            <template v-if="pageType=='view'">
              {{ form.dunBrand }}
            </template>
            <el-input
              v-else
              v-model.trim="form.dunBrand"
              maxlength="20" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="收货单位补充说明"
            prop="cnsgUserAdd">
            <template v-if="pageType=='view'">
              {{ form.cnsgUserAdd }}
            </template>
            <el-input
              v-else
              v-model.trim="form.cnsgUserAdd"
              type="textarea"
              maxlength="200" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="收货单位关联码"
            prop="cnsgUserRelaNo">
            <template v-if="pageType=='view'">
              {{ form.cnsgUserRelaNo }}
            </template>
            <el-input
              v-else
              v-model.trim="form.cnsgUserRelaNo"
              maxlength="6" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="纳税方式标记"
            prop="taxMode">
            <template v-if="pageType=='view'">
              {{ form.taxMode ? '是' : '否' }}
            </template>
            <el-select
              v-else
              v-model.trim="form.taxMode"
              style="width:100%"
              placeholder="请选择">
              <el-option
                v-for="item in flags"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="最后账号序码"
            prop="userLastAccnSeqNo">
            <template v-if="pageType=='view'">
              {{ form.userLastAccnSeqNo }}
            </template>
            <el-input
              v-else
              v-model.trim="form.userLastAccnSeqNo"
              maxlength="2" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="最后地址序码"
            prop="userLastAddrSeqNo">
            <template v-if="pageType=='view'">
              {{ form.userLastAddrSeqNo }}
            </template>
            <el-input
              v-else
              v-model.trim="form.userLastAddrSeqNo"
              maxlength="2" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="用户/供应商代码"
            prop="userNum">
            <el-input
              v-if="pageType=='add'"
              v-model.trim="form.userNum"
              maxlength="6" />
            <template v-else>
              {{ form.userNum }}
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="关联客商代码"
            prop="userRelaNo">
            <template v-if="pageType=='view'">
              {{ form.userRelaNo }}
            </template>
            <el-input
              v-else
              v-model.trim="form.userRelaNo"
              maxlength="6" />
          </el-form-item>
        </el-col>
        <el-col
          v-if="pageType=='view'"
          :span="8">
          <el-form-item
            label="最后更新人工号"
            prop="lastUpdateId">
            {{ form.lastUpdateId }}
          </el-form-item>
        </el-col>
        <el-col
          v-if="pageType=='view'"
          :span="8">
          <el-form-item
            label="最后更新人姓名"
            prop="lastUpdatePerson">
            {{ form.lastUpdatePerson }}
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="备注"
            prop="remarkDscr">
            <template v-if="pageType=='view'">
              {{ form.remarkDscr }}
            </template>
            <el-input
              v-else
              v-model.trim="form.remarkDscr"
              maxlength="100"
              type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span
      v-if="pageType!='view'"
      slot="footer"
      class="dialog-footer">
      <el-button @click="showModal = false">关 闭</el-button>
      <el-button
        type="primary"
        v-oauth
        data-oauthUuid="1620439594000"
        @click="add">提 交</el-button>
    </span>
  </el-dialog>
</template>
  <script>
  import { deepClone } from '@/utils/index'
  export default {
    data() {
      return {
        pageType: null, // 页面类型 编辑 还是新增
        title: null,
        showModal: false,
        flags: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        form: {
          'addrRegst': null,
          'archiveFlag': null,
          'cancelMark': null,
          'chineseUserName': null,
          'chineseUsnmAbbr': null,
          'cnsgUserAdd': null,
          'cnsgUserRelaNo': null,
          'companyFlag': null,
          'corpCode': null,
          'countryNameAbbr': null,
          'dunBrand': null,
          'englishUserName': null,
          'englishUsnmAbbr': null,
          'lastUpdateId': null,
          'lastUpdatePerson': null,
          'lastUpdateTime': null,
          'officeAddr': null,
          'orgCode': null,
          'relationMark': null,
          'remarkDscr': null,
          'stratagemMark': null,
          'taxMode': null,
          'taxNum': null,
          'taxNumAdd': null,
          'trade': null,
          'userCategory': null,
          'userLastAccnSeqNo': null,
          'userLastAddrSeqNo': null,
          'userNum': null,
          'userRelaNo': null,
          'userType': null
        },
        difficultylevelOptions: [{
          name: '测试',
          value: '1'
        }],
        rules: {
          archiveFlag: [
            { required: true, message: '请输入', trigger: 'change' }
          ],
          userNum: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          countryNameAbbr: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          chineseUserName: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          chineseUsnmAbbr: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          userCategory: [
            { required: true, message: '请输入', trigger: 'change' }
          ],
          taxNum: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          taxNumAdd: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          officeAddr: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          addrRegst: [
            { required: true, message: '请输入', trigger: 'blur' }
          ]

        }
      }
    },
    methods: {
      closeDialog() {
        this.showModal = false
      },
      renderText(type, code) {
        if (!(type && code)) {
          return
        }
        for (const item in type) {
          if (type[item].value == code) {
            return type[item].name
          }
        }
      },
      show(parms) {
        this.showModal = true
        this.pageType = parms.type
        this.$nextTick(() => {
          this.title = parms.title
          this.init()
          if (parms.type != 'add') {
            // 填充数据
            this.fillData(parms.data)
          }
        })
      },
      add() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.regroupFormData()
          }
        })
      },
      // 组合数据
      regroupFormData() {
        const data = deepClone(this.form)
        this.$emit('appendData', data)
      },
      fillData(data) {
        this.form = data
      },
      init() {
        this.options = []
        this.form = {
          'addrRegst': null,
          'archiveFlag': null,
          'cancelMark': null,
          'chineseUserName': null,
          'chineseUsnmAbbr': null,
          'cnsgUserAdd': null,
          'cnsgUserRelaNo': null,
          'companyFlag': null,
          'corpCode': null,
          'countryNameAbbr': null,
          'dunBrand': null,
          'englishUserName': null,
          'englishUsnmAbbr': null,
          'lastUpdateId': null,
          'lastUpdatePerson': null,
          'lastUpdateTime': null,
          'officeAddr': null,
          'orgCode': null,
          'relationMark': null,
          'remarkDscr': null,
          'stratagemMark': null,
          'taxMode': null,
          'taxNum': null,
          'taxNumAdd': null,
          'trade': null,
          'userCategory': null,
          'userLastAccnSeqNo': null,
          'userLastAddrSeqNo': null,
          'userNum': null,
          'userRelaNo': null,
          'userType': null
        }
        this.$refs.form.resetFields()
      }
    }
  }
  </script>
